<template>
  <div>
    <p v-html = "str"></p>
    <p v-text="str"></p>
  </div>
</template>

<script setup>
  import {ref} from "vue"
    // 指令
    // 1.概念：作用在标签上，vue的特殊语法
    // 2.作用：增强标签渲染数据的能力
    // 3.分类
      // 1.内容渲染指令: 作用类似于插值,把表达式的结果渲染到双标签中
      // v-html = "表达式"-会解析表达式
      // v-text = "表达式"-不会解析表达式 === {{ 表达式 }}
  let str = ref("<span style = 'color: red;'> hello vue + vite </span>")
</script>

<style scoped>

</style>